Angular Material এর Accordion কম্পোনেন্ট ব্যবহার করে আপনি কোলাপসিবল প্যানেল তৈরি করতে পারেন, যা ব্যবহারকারীদের জন্য একাধিক প্যানেল একসাথে দেখানোর এবং তাদের চাহিদা অনুযায়ী কোলাপস বা এক্সপ্যান্ড (Collapse/Expand) করার সুযোগ প্রদান করে। এটি সাধারণত FAQ সেকশন বা অন্যান্য জায়গায় ব্যবহার করা হয়, যেখানে একাধিক কন্টেন্টকে একসাথে সুশৃঙ্খলভাবে প্রদর্শন করা হয়।

Angular Material এর MatAccordion এবং MatExpansionPanel কম্পোনেন্টের মাধ্যমে কোলাপসিবল প্যানেল তৈরি করা যায়।

১. প্রাথমিক প্রস্তুতি

প্রথমে, MatExpansionModule মডিউলটি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে।

মডিউল ইমপোর্ট করা

আপনার app.module.ts ফাইলে MatExpansionModule ইমপোর্ট করুন:

import { MatExpansionModule } from '@angular/material/expansion';

@NgModule({
  imports: [
    MatExpansionModule
  ]
})
export class AppModule { }

২. কোলাপসিবল প্যানেল তৈরি করা

এখন MatAccordion এবং MatExpansionPanel ব্যবহার করে একটি কোলাপসিবল প্যানেল তৈরি করবো।

HTML কোড:

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
      <mat-panel-description>
        This is the first panel
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the content of panel 1.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
      <mat-panel-description>
        This is the second panel
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the content of panel 2.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 3
      </mat-panel-title>
      <mat-panel-description>
        This is the third panel
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the content of panel 3.</p>
  </mat-expansion-panel>
</mat-accordion>

এখানে:

• mat-accordion: এটি কোলাপসিবল প্যানেলের মূল কন্টেইনার।
• mat-expansion-panel: প্রতিটি কোলাপসিবল প্যানেল।
• mat-expansion-panel-header: প্যানেলের শিরোনাম অংশ যেখানে mat-panel-title এবং mat-panel-description যুক্ত করা হয়।

৩. কোলাপসিবল প্যানেলের আচরণ নিয়ন্ত্রণ করা

আপনি expanded প্রপার্টি ব্যবহার করে প্যানেলের এক্সপ্যান্ড/কোলাপস নিয়ন্ত্রণ করতে পারেন।

HTML কোড:

<mat-accordion>
  <mat-expansion-panel [expanded]="panel1Expanded">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the content of panel 1.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the content of panel 2.</p>
  </mat-expansion-panel>
</mat-accordion>

TypeScript কোড:

export class AppComponent {
  panel1Expanded = true; // প্রথম প্যানেল ডিফল্টভাবে এক্সপ্যান্ড থাকবে
}

এখানে, panel1Expanded ভেরিয়েবলটি ব্যবহার করা হয়েছে, যার মাধ্যমে আপনি প্যানেল ১ এর এক্সপ্যান্ড বা কোলাপস করার আচরণ নিয়ন্ত্রণ করতে পারবেন।

৪. একাধিক প্যানেল একসাথে এক্সপ্যান্ড করা

ডিফল্টভাবে, Angular Material Accordion শুধুমাত্র একটি প্যানেল একসাথে এক্সপ্যান্ড হতে দেয়। তবে আপনি চাইলে সব প্যানেল একসাথে এক্সপ্যান্ড বা কোলাপস করতে পারবেন।

HTML কোড:

<mat-accordion multi="true">
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 1
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the content of panel 1.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Panel 2
      </mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the content of panel 2.</p>
  </mat-expansion-panel>
</mat-accordion>

এখানে multi="true" অ্যাট্রিবিউট ব্যবহার করা হয়েছে, যার মাধ্যমে একাধিক প্যানেল একসাথে এক্সপ্যান্ড হতে পারে।

৫. কাস্টম স্টাইলিং (CSS)

Angular Material ডিফল্ট স্টাইলিং প্রদান করে, তবে আপনি চাইলে কাস্টম স্টাইলও করতে পারেন। উদাহরণস্বরূপ, আপনি প্যানেলের শিরোনাম বা কন্টেন্টের ফন্ট, রং ইত্যাদি পরিবর্তন করতে পারেন।

CSS:

mat-expansion-panel {
  margin-bottom: 10px;
}

mat-expansion-panel-header {
  background-color: #f1f1f1;
}

mat-panel-title {
  font-weight: bold;
}

এখানে, আমরা প্যানেলের মাঝে স্পেস (margin) যোগ করেছি এবং শিরোনামের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করেছি।

Angular Material Accordion কম্পোনেন্ট ব্যবহার করে কোলাপসিবল প্যানেল তৈরি করা খুবই সহজ এবং কার্যকরী। এটি বিশেষত FAQ সেকশন, ডাইনামিক কনটেন্ট লোডিং, এবং যেকোনো জায়গায় যেখানে একাধিক অপশন বা কন্টেন্ট সুশৃঙ্খলভাবে উপস্থাপন করা দরকার, সেখানে ব্যবহার করা যায়। Angular Material এর সাহায্যে আপনি কাস্টম স্টাইলিং, এক্সপ্যান্ড/কোলাপস নিয়ন্ত্রণ এবং একাধিক প্যানেল একসাথে এক্সপ্যান্ড করার সুবিধা পেতে পারেন।